{%- liquid
  case section.settings.desktop_text_alignment
    when 'left'
      assign desktop_text_alignment = 'text-md-start'
      assign desktop_text_position = 'justify-content-md-start'
      assign content_alignment = 'mx-md-0'
    when 'center'
      assign desktop_text_alignment = 'text-md-center'
      assign desktop_text_position = 'justify-content-md-center'
      assign content_alignment = 'mx-md-auto'
  endcase

  case section.settings.mobile_text_alignment
    when 'left'
      assign text_alignment =  desktop_text_alignment | append: ' text-start'
      assign content_alignment = content_alignment | append: ' mx-0'
    when 'center'
      assign text_alignment = desktop_text_alignment | append: ' text-center'
      assign content_alignment = content_alignment | append: ' mx-auto'
  endcase

  case section.settings.background_color
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase

  assign mark = 'h2'
  if section.settings.enable_adjust_h_tag
    assign mark = section.settings.adjust_h_tag_to
  endif
%}

<div class="scroller-section">
  <div class="my-section {{ text_color }}">
    <div class="container text-content {{ text_alignment }}">
      <div class="row {{ desktop_text_position }}">
        <div class="col-12 {{ section.settings.text_width }}">
          {%- if section.settings.headline != empty -%}
            <h2 class="{{ section.settings.headline_size }} {% if section.settings.description != empty %}mb-2{% else %}mb-0{% endif %}">{{ section.settings.headline }}</h2>
          {%- endif -%}
          {%- if section.settings.description != empty -%}
            <div class="no-last-margin richtext-with-link {{ richtext_link_style }}">{{ section.settings.description }}</div>
          {%- endif -%}
        </div>
      </div>
    </div>
    
    {%- assign slide_blocks = section.blocks | where: 'type', 'slide' -%}
    {%- if slide_blocks.size > 0 -%}
      <div class="mt-md-6 mt-5 activities-scroller-container container-topic position-relative d-md-flex justify-content-lg-center overflow-hidden as-activities-scroller-container">
        <div class="swiper as-swiper {% if slide_blocks.size < 3 %}container-md-limit mx-md-auto {% if slide_blocks.size == 1 %}mx-0{% endif %} {% endif %} d-grid not-initialized swiper-default">
          <div class="swiper-wrapper d-flex {% if slide_blocks.size < 3 %}justify-content-md-start justify-content-center{% endif %} flex-nowrap">
            {%- for block in slide_blocks -%}
              {%- liquid
                case block.settings.activity_status
                  when 'Ongoing'
                    assign activity_status_text = 'sections.activities-scroller.ongoing'
                    assign activity_status_bg = 'bg-success'
                  when 'Closed'
                    assign activity_status_text = 'sections.activities-scroller.closed'
                    assign activity_status_bg = 'bg-gray-600'
                endcase
              -%}

              {%- liquid
                assign show_stretched_link = false

                if block.settings.primary_button_link != blank
                  assign stretched_link = block.settings.primary_button_link
                  assign show_stretched_link = true
                elsif block.settings.secondary_button_link != blank
                  assign stretched_link = block.settings.secondary_button_link
                  assign show_stretched_link = true
                else
                  assign show_stretched_link = false
                endif
              %}
              <div class="as-swiper-slide swiper-slide swiper-slide-card-auto swiper-slide-{{ block.id }} {%- if forloop.first -%}swiper-slide-active{%- endif -%}" {{ block.shopify_attributes }}>
                <figure class="img-wrapper h-100 mb-0">
                  {%- if block.settings.image != nil -%}
                    <picture class="as-slide-picture ratio rounded-top-2 
                      {% if section.settings.show_activity_status %} smaller-img-radius {% endif %} d-block position-relative overflow-hidden"
                      style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;">
                      {{ block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: 'lazy', class: 'object-fit-cover', sizes: '(min-width: 1024px) 384px, (min-width: 600px) 220px, 282px', widths: '360, 480, 720, 960, 1200, 1920' }}
                    </picture>
                  {%- else -%}
                    <div class="as-slide-picture ratio ratio-2x3 rounded-top-2 bg-gray-400 overflow-hidden">
                      {% assign num = forloop.index | modulo: 5 | plus: 1 %}
                      {% assign placeholder = 'collection-' | append: num %}
                      {{ placeholder | placeholder_svg_tag: 'absolute-center placeholder-svg w-100 h-100' }}
                    </div>
                  {%- endif -%}
                  <div class="as-slide-content {{ background_color }} slide-content d-flex flex-column justify-content-between rounded-bottom-2 p-md-5 p-4">
                    <div class="slide-content-top">
                      {%- if block.settings.overline != blank -%}
                        <p class="mb-2 overline fs-footnote {% if text_color == '' %}gray-600{% endif %}">{{ block.settings.overline }}</p>
                      {% endif %}
                      {%- if block.settings.headline != empty -%}
                        <{{ mark }} class="h5 mb-2">{{ block.settings.headline }}</{{ mark }}>
                      {%- endif -%}
                      {%- if block.settings.description != empty -%}
                        <figcaption class="no-last-margin richtext-with-link small {{ richtext_link_style }}">{{ block.settings.description | replace: '<p', '<p class="mb-4"' | replace: '<strong', '<strong class="d-inline-flex"' }}</figcaption>
                      {%- endif -%}
                    </div>
                    {%- if block.settings.primary_button_label != empty or block.settings.secondary_button_label != empty -%}
                      <div class="slide-content-bottom mt-4">
                        <div class="mx-n2">
                          {%- if block.settings.primary_button_label != empty -%}
                            {%- if block.settings.primary_button_link != blank -%}
                              <a {% render 'link', link: block.settings.primary_button_link %} href="{{ block.settings.primary_button_link }}" class="btn mx-2 btn-link link-{{ btn_style }}">
                                <span class="d-block">
                                  {{ block.settings.primary_button_label }}
                                </span>
                              </a>
                            {%- else -%}
                              <div class="btn mx-2 btn-link link-{{ btn_style }} disabled cursor-default">
                                <span class="d-block">
                                  {{ block.settings.primary_button_label }}
                                </span>
                              </div>
                            {%- endif -%}
                          {%- endif -%}
                          {%- if block.settings.secondary_button_label != empty -%}
                            {%- if block.settings.secondary_button_link != blank -%}
                              <a {% render 'link', link: block.settings.secondary_button_link %} href="{{ block.settings.secondary_button_link }}" class="btn mx-2 btn-link link-{{ btn_style }}">
                                <span class="d-block">
                                  {{ block.settings.secondary_button_label }}
                                </span>
                              </a>
                              {%- else -%}
                              <div class="btn mx-2 btn-link link-{{ btn_style }} disabled cursor-default">
                                <span class="d-block">
                                  {{ block.settings.secondary_button_label }}
                                </span>
                              </div>
                            {%- endif -%}
                          {%- endif -%}
                        </div>
                      </div>
                    {%- endif -%}
                  </div>
                </figure>
                {%- if section.settings.enable_image_link -%}
                  {%- if show_stretched_link -%}
                    <a {% render 'link', link: stretched_link %} 
                      href="{{ stretched_link }}"
                      class="stretched-link"></a>
                  {%- endif -%}
                {%- endif -%}
                {% if section.settings.show_activity_status %}                  
                  <div class="position-absolute top-0 start-0 py-1 px-2 {{ activity_status_bg }} rounded-top-left-2 rounded-bottom-right-2">
                    <p class="mb-0 small fw-bolder text-body-inverse">{{ activity_status_text | t }}</p>
                  </div>
                {% endif %}
              </div>
            {%- endfor -%}
          </div>
        </div>
        {%- comment -%}左右箭头{%- endcomment -%}
        <div class="swiper-indicators d-lg-block d-none position-absolute top-50 translate-middle-y w-100" style="z-index: 1;">
          <div class="position-relative d-flex justify-content-between">
            {%- if slide_blocks.size > 1 -%}
              {% liquid
                assign indicator_color = 'text-body'
                assign indicator_inverse_color = 'text-body-inverse'
              %}
              <div class="as-swiper-indicator-prev d-none swiper-indicator-prev cursor-pointer d-flex align-items-center justify-content-center {{ indicator_color }}"><span class="icon-wrap-xl {{ indicator_inverse_color }}">{% render 'icon-chevron-left-tab' %}</span></div>
              <div class="as-swiper-indicator-next d-none swiper-indicator-next cursor-pointer d-flex align-items-center justify-content-center {{ indicator_color }}"><span class="icon-wrap-xl {{ indicator_inverse_color }}">{% render 'icon-chevron-right-tab' %}</span></div>
            {%- endif -%}
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if section.settings.button_label != empty -%}
      <div class="mt-md-6 mt-5 {{ text_alignment }} {{ content_alignment }}">
        {%- if section.settings.button_label != empty -%}
          {%- if section.settings.button_link != blank -%}
            <a {% render 'link', link: section.settings.button_link %} href="{{ section.settings.button_link }}" class="btn btn-outline-primary">
              {{ section.settings.button_label }}
            </a>
          {%- else -%}
            <div class="btn btn-outline-primary mt-2 disabled cursor-default">
              {{ section.settings.button_label }}
            </div>
          {%- endif -%}
        {%- endif -%}
      </div>
    {%- endif -%}
  </div>
</div>

{% schema %}
{
  "name": "Activities scroller",
  "class": "activities-scroller as-activities-scroller",
  "tag": "section",
  "settings": [
    {
      "type": "header",
      "content": "CONTENT"
    },
    {
      "type": "text",
      "id": "headline",
      "label": "Headline"
    },
    {
      "type": "header",
      "content": "H tag for headline in block"
    },
    {
      "type": "checkbox",
      "id": "enable_adjust_h_tag",
      "label": "Enable adjust H tag",
      "default": false
    },
    {
      "type": "select",
      "id": "adjust_h_tag_to",
      "label": "Adjust the H tag to",
      "options": [
        {
          "value": "h1",
          "label": "H1"
        },
        {
          "value": "h2",
          "label": "H2"
        },
        {
          "value": "h3",
          "label": "H3"
        },
        {
          "value": "h4",
          "label": "H4"
        },
        {
          "value": "h5",
          "label": "H5"
        },
        {
          "value": "h6",
          "label": "H6"
        }
      ],
      "default":   "h3"
    },
    {
      "type": "select",
      "id": "headline_size",
      "label": "Headline size",
      "options": [
        {
          "value": "h3",
          "label": "32px"
        },
        {
          "value": "h1",
          "label": "48px"
        }
      ],
      "default": "h3"
    },
    {
      "type": "text",
      "id": "description",
      "label": "Description"
    },
    {
      "type": "select",
      "id": "desktop_text_alignment",
      "label": "Desktop text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "mobile_text_alignment",
      "label": "Mobile text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "center"
    },
    {
      "type": "header",
      "content": "BUTTON"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "checkbox",
      "id": "show_activity_status",
      "default": false,
      "label": "Show activity status"
    },
    {
      "type": "select",
      "id": "background_color",
      "label": "Background color",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        }, 
        {
          "value": "secondary",
          "label": "Secondary"
        }, 
        {
          "value": "inverse",
          "label": "Inverse"
        }, 
        {
          "value": "white",
          "label": "White"
        }, 
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    },
    {
      "type": "select",
      "id": "text_width",
      "label": "Desktop text width",
      "options": [
        {
          "value": "col-md-8",
          "label": "2/3"
        },
        {
          "value": "col-md-6",
          "label": "1/2"
        },
        {
          "value": "col-md-4",
          "label": "1/3"
        }
      ],
      "default": "col-md-6"
    },
    {
      "type": "select",
      "id": "text_color",
      "label": "Text color",
      "options": [
        {
          "value": "white",
          "label": "White"
        }, 
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    },
    {
      "type": "checkbox",
      "id": "enable_image_link",
      "label": "Enable image link",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "label": "Image",
          "type": "image_picker",
          "id": "image"
        },
        {
          "type": "header",
          "content": "CONTENT"
        },
        {
          "type": "text",
          "id": "overline",
          "label": "Overline"
        },
        {
          "type": "text",
          "id": "headline",
          "label": "Headline"
        },
        {
          "type": "text",
          "id": "description",
          "label": "Description"
        },
        {
          "type": "header",
          "content": "BUTTON"
        },
        {
          "type": "text",
          "id": "primary_button_label",
          "label": "Primary button label"
        },
        {
          "type": "url",
          "id": "primary_button_link",
          "label": "Primary button link"
        },
        {
          "type": "text",
          "id": "secondary_button_label",
          "label": "Secondary button label"
        },
        {
          "type": "url",
          "id": "secondary_button_link",
          "label": "Secondary button link"
        },
        {
          "type": "select",
          "id": "activity_status",
          "label": "Activity status",
          "options": [
            {
              "value": "Ongoing",
              "label": "Ongoing"
            },
            {
              "value": "Closed",
              "label": "Closed"
            }
          ],
          "default": "Ongoing"
        }
      ] 
    }
  ],
  "presets": [
    {
      "name": "Activities scroller"
    }
  ]
}
{% endschema %}